<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p>The <code>&lt;md-slider&gt;</code> component allows the user to choose from a range of
values.</p>
<p>As per the <a href="http://www.google.com/design/spec/style/color.html#color-ui-color-application">material design spec</a>
the slider is in the accent color by default. The primary color palette may be used with
the <code>md-primary</code> class.</p>
<p>It has two modes: &#39;normal&#39; mode, where the user slides between a wide range
of values, and &#39;discrete&#39; mode, where the user slides between only a few
select values.</p>
<p>To enable discrete mode, add the <code>md-discrete</code> attribute to a slider,
and use the <code>step</code> attribute to change the distance between
values the user is allowed to pick.</p>

</div>


<div>
  

  

  
  <section class="api-section">
    <h2 id="Usage">Usage</h2>
  
    <p><h4>Normal Mode</h4></p>
<hljs lang="html">
<md-slider ng-model="myValue" min="5" max="500">
</md-slider>
</hljs>
<h4>Discrete Mode</h4>
<hljs lang="html">
<md-slider md-discrete ng-model="myDiscreteValue" step="10" min="10" max="130">
</md-slider>
</hljs>
  
  </section>
  
  <div class="api-param-section">
    <h2>
      
        Attributes
      
    </h2>
    <div class="api-param-table">
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
    
  
    
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-discrete
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>Whether to enable discrete mode.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          step
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-number">number</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-number">number</code></td>
        <td class="description">
          <p>The distance between values the user is allowed to pick. Default 1.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          min
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-number">number</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-number">number</code></td>
        <td class="description">
          <p>The minimum value the user is allowed to pick. Default 0.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          max
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-number">number</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-number">number</code></td>
        <td class="description">
          <p>The maximum value the user is allowed to pick. Default 100.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

    </div>
  </div>
  


  
</div>


</div>
